import React, { useEffect, useState, useRef } from 'react';
import AxCard from '@/components/AxBase/AxCard';
import { AxColumnEnum, AxTable } from '@/components/AxList';
import AxOperationButton from '@/components/AxList/AxOperationButton';
import { axconst } from '@/shared/axconst';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import { AxInputForSimple } from '@/components/AxBase';
import { router } from 'umi';
import { axurl } from '@/shared/axurl';
import { AxStandardTableNoDva } from '@/components/AxList/AxStandardTable';
import Search from './search';

const Index: React.FC<any> = props => {
    const ref: any = useRef({});
    const { currentTypeData } = props;
    const [cardLoading, setCardLoading] = useState<any>(true);
    const [workFlowType, setWorkFlowType] = useState<any>();

    useEffect(() => {
        if (currentTypeData) {
            setWorkFlowType(currentTypeData.id);
            setCardLoading(false);
            /** state 1待办 2已办 3发起 */
            ref.current.handleRead({ workFlowType: currentTypeData.id, state: 1 });
        }
    }, [currentTypeData]);

    /** 配置列 */
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            width: axconst.width.threeonly,
        },
        {
            title: '身份证',
            dataIndex: 'idcard',
            width: axconst.width.idcard,
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: axconst.width.long,
        },
        {
            title: '内容',
            dataIndex: 'description',
            width: axconst.width.longx,
        },
        {
            title: '当前节点',
            dataIndex: 'currentNodeName',
            width: axconst.width.fouronly,
        },
        {
            title: '流程状态',
            dataIndex: 'workFlowState',
            width: axconst.width.fouronly,
            render: (val: any) => <AxColumnEnum enumName='workFlowState' value={val} />,
        },
        {
            title: '创建人',
            dataIndex: 'creatorName',
            width: axconst.width.threeonly,
        },
        {
            title: '创建时间',
            dataIndex: 'created',
            width: axconst.width.time,
        },
        {
            title: '操作',
            dataIndex: 'orgName8',
            width: axconst.width.two,
            render: (val: any, record: any) => (
                <AxColumnAction
                    buttons={[
                        {
                            text: '处理',
                            group: false,
                            onClick: () => handleDealFlow(record),
                        },
                    ]}
                />
            ),
        },
    ];

    /** 配置操作按钮 */
    const buttons = [
        {
            axtype: 'refresh',
        },
    ];

    /** 处理流程 */
    const handleDealFlow = (record: any) => {
        router.push({ pathname: '/buyer/person/deal/need/dealFlow', query: { type: currentTypeData.id, id: record.id } });
    };

    /** 简单查询项 */
    const simpleSearchObject: any[] = [
        {
            Component: AxInputForSimple,
            label: "姓名",
            field: "name",
        },
        {
            Component: AxInputForSimple,
            label: "身份证",
            field: "idcard",
        },
    ];

    return (
        <>
            <AxStandardTableNoDva
                ref={ref}
                url={{}}
                params={{ workFlowType: workFlowType, state: 1 }}
                columns={columns}
                buttons={buttons}
                checkboxModel={false}
                firstLoadData={false}
                simpleSearchObject={simpleSearchObject}
                SearchComponent={Search}
                RenderComponent={(args: any) => (
                    <>
                        <AxCard loading={cardLoading}>
                            <AxOperationButton {...args.operationProps} />
                            <AxTable
                                ref={args.tableRef}
                                loading={args.loading}
                                data={args.data}
                                columns={args.axcolumns}
                                showPagination={false}
                                addemptycolumn={true}
                                {...args.rest}
                            />
                        </AxCard>
                    </>
                )}
            />
        </>
    );
};

export default Index;
